/**
 * 匠言知识付费v2.0.0
 * Author: 山西匠言网络科技有限公司
 * 这不是一个免费软件，它受限于许可条款，你可以访问https://www.zsfzxkc.cn/获取更多详细信息。
 * This is not a free software, it under the license terms, you can visit https://www.zsffzxkc.cn/ get more details.
 */
<template>
	<view class="container">
		
		<!-- 抢购时间 -->
		<view class="time">
			<scroll-view scroll-x="true" :scroll-into-view="timeslotid">
				<view v-for="(item, index) in timeList" :key="index" @click="goodslist(item.timeslot,index)" :id="'time'+index">
					<text :style="{color:currentHour==item.timeslot?'#fff':false}">{{item.timeslot}}</text>
					<text :style="{color:currentHour==item.timeslot?'#fff':false}">{{item.timetext}}</text>
				</view>
			</scroll-view>
		</view>
		
		
		<!-- 抢购列表 -->
		<view class="rob-buy">
			<view class="rob-buy-top" v-if="seckillState==1">
				<view class="rob-buy-top-left">
					<image src="../../static/miaosha-icon.png" mode="aspectFit"></image>
					<text>正在抢购</text>
					<text>先到先得，赶紧抢货</text>
				</view>
				<view class="rob-buy-top-right">
					<text>距离结束</text>
					<uni-countdown color="#FFFFFF" background-color="#333" :show-day="false" :hour="killhour" :minute="killminute" :second="killsecond"></uni-countdown>
				</view>
			</view>
			<view class="rob-buy-top" v-if="seckillState==0">
				<view class="rob-buy-top-left">
					<image src="../../static/miaosha-icon.png" mode="aspectFit"></image>
					<text>即将开始</text>
					<text>先到先得，赶紧抢货</text>
				</view>
			</view>
			<view class="rob-buy-top" v-if="seckillState==2">
				<view class="rob-buy-top-left">
					<image src="../../static/miaosha-icon.png" mode="aspectFit"></image>
					<text>已开抢</text>
					<text>先到先得，赶紧抢货</text>
				</view>
			</view>
			<view class="rob-buy-bottom">
				<view class="rob-buy-bottom-list" v-for="(item, index) in robBuyList" :key="index" @click="navigate(item.goodstype,item.goodsid)">
					<view class="item-left">
						<image :src="item.thumb" mode="aspectFit"></image>
						<view class="sell-out" v-if="item.sales == item.stock"><text>已抢光</text></view>
					</view>
					<view class="item-right">
						<text>{{item.goodsname}}</text>
						<text>{{item.goodsinfo.jianjie}}</text>
						<view class="yiqiang">
							<ai-progress :strokeWidth='6' :lineData="true" :isAnimate='true' :percentage="(item.sales / item.stock).toFixed(2)" bgColor="#f23a3a" inBgColor='#ffd9d9'>
								<template v-slot:content>
									<text>已抢{{(item.sales / item.stock).toFixed(2)*100}}%</text>
								</template>
							</ai-progress>
						</view>
						<view class="money">
							<view class="money-left">
								<text>￥</text>
								<text>{{item.price}}</text>
								<text v-if="item.goodsinfo.price ? item.goodsinfo.price : false">￥</text>
								<text v-if="item.goodsinfo.price ? item.goodsinfo.price : false">{{item.goodsinfo.price}}</text>
							</view>
							<view class="money-right" v-if="item.sales != item.stock" @click="seckill(item.goodsinfo.id,item.goodstype)">
								<text>马上抢购</text>
							</view>
							<view class="money-right" v-if="item.sales == item.stock">
								<text>已抢光</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
	import AiProgress from '@/components/ai-progress/ai-progress'
	import { postSeckill } from '@/request/seckill.js'
	export default {
		components: {uniCountdown, AiProgress},
		data() {
			return {
				HOST_URL:uni.HOST_URL,
				timeList: [],
				date: '',
				robBuyList: [],
				newColor: false,
				asd: [],
				currentHour:'',
				timeslotid:'',
				seckillState:0,
				killhour:0,
				killminute:0,
				killsecond:0,
				t1:''

			}
		},
		onShareAppMessage(res) {
			let path = getCurrentPages()
			let path_share = path[0].$page.fullPath
			let path_title = path[0].data.title
			let userinfo = uni.getStorageSync('userinfo')
			let base_set = uni.getStorageSync('base_set')
			if(userinfo.uid=='' || !userinfo.uid){
				uni.navigateTo({
					url:'../login/login'
				})
				return {
					title: '请先登录后再分享给好友',
					path: ''
				}
			}else{
				if (res.from === 'button') {
					
				}
				return {
					title: base_set.title,
					path: `${path_share}?pid=${userinfo.uid}`
				}
			}
		},
		onLoad() {
			var date = new Date()
			var hour = date.getHours() < 10 ? "0" + date.getHours() +':00' : date.getHours() +':00'
			console.log(hour)
			this.currentHour=hour
			this.gettimeslot()

			this.goodslist(hour,'')
		},
		onUnload() {
			clearInterval(this.t1)
		},
		onHide(){
			clearInterval(this.t1)
		},
		onShow() {
			this.set_timeslot1()
		},
		methods:{
			navigate(goodstype,goodsid){
				var e,path;
				if(goodstype=='course'){
					e='course-details'
					uni.navigateTo({
						url: `/pages/${e}/${e}?menuid=${goodsid}&action=seckill`
					});
				}else{
					if(goodstype=='mall'){
						e='shop-details'
						path='/pages/mall/'
					}else if(goodstype=='pxb'){
						e='agency-course-details'
						path='/pages/sub/'
					}
					uni.navigateTo({
						url: path+`${e}/${e}?id=${goodsid}&action=seckill`
					});
				}
			},
			set_timeslot1(){
				this.t1=setInterval(()=>{
					var date = new Date()
					var hour = date.getHours() < 10 ? "0" + date.getHours() +':00' : date.getHours() +':00'
					console.log(hour)
					if(this.timeList){
						this.timeList.forEach((item,index) => {
							if(hour.substr(0,2) > item.timeslot.substr(0,2)) {
								item.timetext = '已开抢'
							} else if(hour.substr(0,2) < item.timeslot.substr(0,2)) {
								item.timetext = '即将开抢'
							} else {
								item.timetext = '抢购中'
								this.timeslotid='time'+index
							}
						})
					}
				},1000)
			},
			set_timeslot(){
				var date = new Date()
				var hour = date.getHours() < 10 ? "0" + date.getHours() +':00' : date.getHours() +':00'
				console.log(hour)
				var robStatus
				if(this.timeList){
					let timelist=this.timeList
					this.timeList=[]
					timelist.forEach((item,index) => {
						if(hour.substr(0,2) > item.substr(0,2)) {
							robStatus = '已开抢'
						} else if(hour.substr(0,2) < item.substr(0,2)) {
							robStatus = '即将开抢'
						} else {
							robStatus = '抢购中'
							this.timeslotid='time'+index
						}
						item = {
							timeslot: item,
							timetext: robStatus
						}
						this.timeList.push(item)
					})
				}
			},
			gettimeslot(){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/seckill/timeslot',
					method:'GET',
					success:(res) =>{
						console.log(res.data)
						this.timeList=res.data.data.timeslot
						this.set_timeslot()
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			formatSecToStr(seconds){
				let daySec = 24 *  60 * 60;
				let hourSec=  60 * 60;
				let minuteSec=60;
				let dd = Math.floor(seconds / daySec);
				let hh = Math.floor((seconds % daySec) / hourSec);
				let mm = Math.floor((seconds % hourSec) / minuteSec);
				let ss=seconds%minuteSec;
				if(dd > 0){
				
				}
				if(hh > 0){
				this.killhour=hh
				}
				if (mm > 0){
				this.killminute=mm
				}
				if(ss>0){
				this.killsecond=ss
				}
			},
			goodslist(hour,key){
				if(this.currentHour!=hour){
					clearInterval(this.t1)
				}
				this.currentHour=hour
				var date = new Date()
				var	nowhour = date.getHours() < 10 ? "0" + date.getHours() +':00' : date.getHours() +':00'
				var	nowhour1 = (date.getHours()+1) < 10 ? "0" + (date.getHours()+1) +':00' : (date.getHours()+1) +':00'
					if(nowhour.substr(0,2) > hour.substr(0,2)){
						this.seckillState=2
					}else if(nowhour.substr(0,2) < hour.substr(0,2)){
						this.seckillState=0
					}else if(nowhour.substr(0,2) == hour.substr(0,2)){
						this.seckillState=1
						var date1 = new Date(date.toLocaleDateString()+' '+nowhour1)
						var time1 = date1.getTime()
						var nowtime=date.getTime()
						var second1=Math.floor((time1-nowtime)/1000)
						console.log(second1)
						this.formatSecToStr(second1)
					}
					

				if(key!=''){
					this.timeslotid='time'+key
				}
				uni.showLoading({
					title:'加载中...'
				})
				postSeckill({timeslot: hour}).then(res => {
					uni.hideLoading()
					console.log(res.data)
					this.robBuyList = res.data.data.data
					this.robBuyList.forEach((item,index)=>{
						let thumb=item.goodsinfo.thumb.split(',')
						item.thumb=thumb[0]
					})
				})
			}
		}
	}
</script>

<style lang="less" scoped>

.time {
	padding: 20upx 0;
	// background-color: #fff;
	background-image: linear-gradient(90deg, #f23a3a, #f75f30);
	scroll-view {
		white-space: nowrap;
		view {
			width: 20%;
			// padding: 0 20upx;
			display: inline-block;
			text-align: center;
			text {
				display: block;
			}
			text:nth-child(1) {
				font-size: 44upx;
				color: rgba(255,255,255,0.3);
				// color: #000000;
			}
			text:last-child {
				font-size: 26upx;
				color: rgba(255,255,255,0.3);
			}
			// .newtext {
			// 	color: #fff;
			// }
		}
	}
}


.rob-buy {
	margin-top: 30upx;
	padding: 20upx;
	background-color: #fff;
	&-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		&-left {
			display: flex;
			align-items: center;
			image {
				width: 35upx;
				height: 35upx;
			}
			text:nth-child(2) {
				font-size: 34upx;
				color: #333;
				margin-left: 10upx;
				font-weight: 700;
			}
			text:nth-child(3) {
				font-size: 25upx;
				color: #333;
				margin-left: 15upx;
			}
		}
		&-right {
			display: flex;
			align-items: center;
			text:nth-child(1) {
				font-size: 25upx;
				color: #333;
				margin-right: 5upx;
			}
			// text:nth-child(2), text:nth-child(4), text:nth-child(6) {
			// 	width: 30upx;
			// 	height: 30upx;
			// 	background-color: #333;
			// 	font-size: 26upx;
			// 	color: #fff;
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;
			// }
		}
	}
	&-bottom {
		&-list {
			border-bottom: 1rpx solid #f2f2f2;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			.item-left {
				position: relative;
				image {
					width: 194upx;
					height: 170upx;
					border-radius: 20upx;
				}
				.sell-out {
					width: 194upx;
					height: 170upx;
					background-color: rgba(0,0,0,0.4);
					position: absolute;
					top: 0;
					left: 0;
					text {
						color: #fff;
						font-weight: 700;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
			.item-right {
				flex: 1;
				margin-left: 30upx;
				display: flex;
				flex-direction: column;
				text:nth-child(1) {
					font-size: 32upx;
					color: #333;
					font-weight: 700;
				}
				text:nth-child(2) {
					font-size: 26upx;
					color: #909090;
				}
				.yiqiang {
					margin: 15upx 0;
					text {
						font-size: 26upx;
						color: #909090;
					}
				}
				.money {
					display: flex;
					justify-content: space-between;
					align-items: center;
					&-left {
						text:nth-child(1) {
							font-size: 24upx;
							color: red;
						}
						text:nth-child(2) {
							font-size: 34upx;
							color: red;
							font-weight: 700;
						}
						text:nth-child(3) {
							font-size: 24upx;
							color: #808080;
							text-decoration: line-through;
							margin-left: 10upx;
						}
						text:nth-child(4) {
							font-size: 24upx;
							color: #808080;
							text-decoration: line-through;
						}
					}
					&-right {
						text {
							display: block;
							width: 150upx;
							height: 60upx;
							background-color: red;
							border-radius: 10upx;
							font-size: 28upx;
							color: #fff;
							text-align: center;
							line-height: 60upx;
						}
					}
				}
			}
		}
	}
}



</style>
